<template>
  <div>
    <div id="logins">

    </div>
    <div>
      <el-button @click="testLoading">加载</el-button>
    </div>
  </div>

</template>

<script>

  import { showLoading, hideLoading } from '../utils/loading'
  import { test } from '@/api/userApi'

  export default {
    name: 'Pay',
    mounted () {
      const canvas = qrcanvas({
        cellSize: 8,
        correctLevel: 'H',
        data: 'weixin://wxpay/bizpayurl?pr=MJfZNutzz',
        foreground: [
          // foreground color
          { style: '#55a' },
          // outer squares of the positioner
          {
            row: 0,
            rows: 7,
            col: 0,
            cols: 7,
            style: '#c33'
          },
          {
            row: -7,
            rows: 7,
            col: 0,
            cols: 7,
            style: '#c33'
          },
          {
            row: 0,
            rows: 7,
            col: -7,
            cols: 7,
            style: '#c33'
          },
          // inner squares of the positioner
          {
            row: 2,
            rows: 3,
            col: 2,
            cols: 3,
            style: '#621'
          },
          {
            row: -5,
            rows: 3,
            col: 2,
            cols: 3,
            style: '#621'
          },
          {
            row: 2,
            rows: 3,
            col: -5,
            cols: 3,
            style: '#621'
          },
        ],
        logo: {
          text: '图云教育',
          options: {
            color: 'dodgerblue',
          },
        }
      })
      let docum = document.getElementById('logins')
      docum.appendChild(canvas)
    },
    methods: {
      async testLoading () {
        showLoading()
        const data = await test()
        console.log(data)
        hideLoading()
      }
    }
  }
</script>

<style scoped>

</style>
